<template>
    <div class="caih-login">
        <div class="caih-login-title">
            {{ props.title }}
            <span v-if="props.subTitle">{{ props.subTitle }}</span>
        </div>
        <div class="caih-login-content">
            <template v-if="props.type === 'phone'">
                <Phone :sms-delay="props.smsDelay" :get-sms-code="props.getSmsCode" @login="handleLogin" />
            </template>
            <template v-if="props.type === 'account'">
                <Account :forget="props.forget" :get-captcha="props.getCaptcha" @login="handleLogin" />
            </template>
            <el-tabs v-if="props.type === 'all'" v-model="state.active">
                <el-tab-pane label="手机号码登录" name="phone">
                    <Phone :sms-delay="props.smsDelay" :get-sms-code="props.getSmsCode" @login="handleLogin" />
                </el-tab-pane>
                <el-tab-pane label="账号登录" name="account">
                    <Account :forget="props.forget" :get-captcha="props.getCaptcha" @login="handleLogin" />
                </el-tab-pane>
            </el-tabs>
            <div v-if="props.register" class="link-register" @click="handleClickRegister">
                立即注册
                <el-icon><el-icon-right /></el-icon>
            </div>
        </div>
    </div>
</template>

<script setup>
import { reactive } from "vue";
import { useRouter } from "vue-router";

import Phone from "./components/phone.vue";
import Account from "./components/account.vue";

const router = useRouter();

const emits = defineEmits(["login"]);
const props = defineProps({
    title: { type: String, default: "用户登录" },
    subTitle: { type: String, default: "LOGIN" },
    register: { type: [String, Function], default: "" },
    forget: { type: [String, Function], default: "" },
    type: { validator: (value) => ["all", "phone", "account"].includes(value), default: "all" },
    smsDelay: { type: [String, Number], default: 60 },
    // eslint-disable-next-line vue/require-default-prop
    getSmsCode: Function,
    getCaptcha: { type: [String, Function], default: "" },
});

const state = reactive({ active: "phone" });

const handleClickRegister = () => {
    if (typeof props.register === "string") {
        router.push(props.register);
    } else if (typeof props.register === "function") {
        props.register();
    }
};

const handleLogin = (value) => {
    emits("login", value);
};
</script>

<style lang="scss" scoped>
.caih-login {
    width: 416px;
    padding: 48px 43px;
    background: #fff;
    box-sizing: border-box;
    .caih-login-title {
        display: flex;
        align-items: center;
        height: 26px;
        font-size: 20px;
        font-weight: 700;
        color: rgba(0, 0, 0, 0.85);
        margin-bottom: 32px;
        span {
            margin-left: 8px;
            color: rgba(0, 0, 0, 0.25);
        }
    }
    .caih-login-content {
        .link-register {
            display: flex;
            align-items: center;
            color: var(--el-color-primary);
            font-size: 14px;
            text-decoration: none;
            margin-top: 24px;
            cursor: pointer;
            :deep(.el-icon) {
                margin-left: 8px;
            }
        }
    }
}
:deep() {
    .el-tabs {
        .el-tabs__header {
            margin-bottom: 24px;
        }
        .el-tabs__item {
            height: 48px;
        }
    }
}
</style>
